<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<head>
		<meta charset="UTF-8">
		<title>新东方顶部页面</title>
		<style type="text/css">
			* {
				margin: 0px auto;
			}
			
			.div {
				height: 30px;
				border-bottom: 1px dashed gray;
				position: relative;
				background: #EEEEED;
			}
			
			.img {
				margin-left: 10px;
				vertical-align: middle;
				margin-top: -5px;
			}
			
			.nav {
				display: inline;
				line-height: 30px;
				border-right: 1px solid #6F6F6F;
			}
			
			.div-box a {
				text-decoration: none;
				color: #6F6F6F;
				margin: 15px;
			}
			
			.div-box {
				display: inline;
				margin-left: 100px;
			}
			
			.div1 {
				display: inline;
				line-height: 30px;
			}
			
			a img {
				position: relative;
				top: -8px;
				left: 1px;
			}
			
			.post {
				font-size: 14px;
				padding-top: 12px;
				width: 270px;
				position: relative;
				background: white;
				top: -10px;
				left: -230px;
				display: none;
				border: 1px solid #C0C0C0;
				padding-bottom: 15px;
			}
			
			.post ul {
				margin-left: -20px;
				list-style-type: none;
			}
			
			.post ul li {
				margin-right: 2px;
				line-height: 26px;
				display: inline-block;
			}
			
			.post ul li a {
				text-decoration: none;
				color: gray;
			}
			
			.post ul li a:hover {
				color: orangered;
			}
			
			hr {
				background-color: #DBD8D8;
				border: 0;
				height: 1px;
				width: 240px;
				margin-left: 5px;
				margin-top: 10px;
				margin-bottom: 10px;
			}
			
			.div1:hover .post {
				display: block;
			}
		</style>
	</head>

	<body>
		<header>
			<div class="div">
				<img src="logo.gif" class="img" />
				<div class="div-box">
					<div class="nav">
						<a href="#">购物车</a>
					</div>
					<div class="nav">
						<a href="#">优惠券</a>
					</div>
					<div class="nav">
						<a href="#">快速注卡</a>
					</div>
					<div class="nav">
						<a href="#">各地购课</a>
					</div>
					<div class="nav">
						<a href="#">手机报</a>
					</div>
					<div class="div1">
						<a href="#">网站导航 <img src="open_icon.gif" /></a>

						<div class="post">
							<ul>
								<li>
									<a href="#">托福</a>
								</li>
								<li>
									<a href="#">雅思</a>
								</li>
								<li>
									<a href="#">考研</a>
								</li>
								<li>
									<a href="#">职称英语</a>
								</li>
								<li>
									<a href="#">初中</a>
								</li>
								<li>
									<a href="#">日语</a>
								</li>
								<hr />
							</ul>
							<ul>
								<li>
									<a href="#">网络课堂</a>
								</li>
								<li>
									<a href="#">资讯中心</a>
								</li>
								<li>
									<a href="#">知识堂</a>
								</li>
								<li>
									<a href="#">大师讲坛</a>
								</li>
								<li>
									<a href="#">学习论坛</a>
								</li>
								<li>
									<a href="#">学词</a>
								</li>
								<li>
									<a href="#">考研搜校</a>
								</li>
								<hr />
							</ul>
							<ul>
								<li>
									<a href="#">M-Zone</a>
								</li>
								<li>
									<a href="#">手机报</a>
								</li>
								<li>
									<a href="#">时时英语</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</header>

	</body>

</html>